<template>
  <div class="demo-container">
    <el-calendar v-model="currentDate">
      <template #date-cell="{ data }">
        <div>{{ data.day }}</div>
        <div class="calendar-cell">
          <!-- 显示7个包厢 -->
          <div
            v-for="box in boxOptions"
            :key="box"
            class="box-container"
          >
            <div v-show="isBooked(data.day, box.BX_ID, 'noon') || isBooked(data.day, box.BX_ID, 'night')">

              <!-- <div class="box-title">{{ box.NAME }}</div> -->
              <div class="time-slots">
                <!-- 中午时段 -->
                <div
                  class="time-slot noon"
                  v-show="isBooked(data.day, box.BX_ID, 'noon')"
                  :class="{ 'booked': isBooked(data.day, box.BX_ID, 'noon') }"
                  @click="handleClick(getBooking(data.day, box.BX_ID, 'noon'))"
                >
                  {{ box.NAME }} {{ isBooked(data.day, box.BX_ID, 'noon') ? '午餐已预约' : '午餐空闲' }}
                </div>
                <!-- 晚上时段 -->
                <div
                  class="time-slot night"
                  v-show="isBooked(data.day, box.BX_ID, 'night')"
                  :class="{ 'booked': isBooked(data.day, box.BX_ID, 'night') }"
                  @click="handleClick(getBooking(data.day, box.BX_ID, 'night'))"
                >
                  {{ box.NAME }} {{ isBooked(data.day, box.BX_ID, 'night') ? '晚餐已预约' : '晚餐空闲' }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>

    <!-- 详情弹窗 -->

    <el-dialog
      v-model="dialogVisible"
      title="预约详情"
      width="30%"
    >
      <div v-if="currentBooking">
        <el-descriptions
          :column="1"
          border
        >
          <el-descriptions-item label="包厢">{{ currentBooking.NAME }}</el-descriptions-item>
          <el-descriptions-item label="日期">{{ currentBooking.RECORD_TIME }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentBooking.WORKID }}</el-descriptions-item>
          <!-- <el-descriptions-item label="时段">{{ currentBooking.timeSlot === 'noon' ? '中午' : '晚上' }}</el-descriptions-item> -->
          <el-descriptions-item label="状态">
            <el-tag>{{ currentBooking.STATE }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="容量">{{ currentBooking.CAPACITY }}人</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ currentBooking.LXR }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentBooking.PHONE }}</el-descriptions-item>
          <el-descriptions-item label="客户">{{ currentBooking.DW }}</el-descriptions-item>
          <el-descriptions-item label="消费标准">{{ currentBooking.BX_BZ }}</el-descriptions-item>
          <el-descriptions-item label="用餐部门">{{ currentBooking.YCBM }}</el-descriptions-item>
          <el-descriptions-item label="成本中心">{{ currentBooking.CBZX }}</el-descriptions-item>REAMRK
          <el-descriptions-item label="备注">{{ currentBooking.REAMRK }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import myAxios from '@/myAxios/myAxios';
import { dayjs } from 'element-plus';
import { onMounted, ref, watch } from 'vue';

let boxOptions = ref([
  { BX_ID: '01', NAME: '大包厢' },
  { BX_ID: '02', NAME: '小包厢' },
  { BX_ID: '03', NAME: '雅座一(圆桌)' },
  { BX_ID: '04', NAME: '雅座二(圆桌)' },
  { BX_ID: '05', NAME: '雅座三(方桌)' },
  { BX_ID: '06', NAME: '雅座四(方桌)' },
  { BX_ID: '07', NAME: '雅座五(方桌)' },
]);

let currentDate = ref(new Date());
// 模拟预约数据
const bookings = ref([
  {
    "BX_RECORD_ID": "a1ae9bfb-2be3-46a3-b09e-f06e1aae1d95",
    "BX_ID": "01",
    "RECORD_TIME": "2025/04/07 17:30:00",
    "WORKID": "11596",
    "CAPACITY": 18,
    "PHONE": "15057415343",
    "STATE": "已完成",
    "PUSH_TIME": "2025/04/03 16:43:37",
    "REAMRK": null,
    "SP_ID": null,
    "BX_BZ": "150/人",
    "DW": "驱动器技术科",
    "LXR": "张新梅",
    "YCBM": "-",
    "CBZX": "安信",
    "NAME": "大包厢"
  },
]);
let getBookingDatas = () => {
  let startMonth = dayjs(currentDate.value).add(-1, 'month').format('YYYY/MM');
  let endMonth = dayjs(currentDate.value).add(2, 'month').format('YYYY/MM');
  let params = `${startMonth}\t${endMonth}`;
  myAxios.get('陈帅廷查询包厢进行中和已完成记录', params, '9900').then(res => {
    res.forEach(el => {
      el.timeSlot = el.RECORD_TIME.split(' ')[1].includes('11:50') ? 'noon' : 'night';
    });
    bookings.value = res;
  });
};

watch(currentDate, () => {
  getBookingDatas();
}, { immediate: true });
onMounted(() => {
  // getBookingDatas();
});

const dialogVisible = ref(false);
const currentBooking = ref(null);

// 检查是否已预约
const isBooked = (date, boxId, timeSlot) => {
  let result = bookings.value.some(booking =>
    formatDate(booking.RECORD_TIME) === formatDate(date) &&
    booking.BX_ID === boxId &&
    booking.timeSlot === timeSlot
  );
  //   console.log('result :>> ', date);
  return result;
};

// 获取预约详情
const getBooking = (date, boxId, timeSlot) => {
  return bookings.value.find(booking =>
    formatDate(booking.RECORD_TIME) === formatDate(date) &&
    booking.BX_ID === boxId &&
    booking.timeSlot === timeSlot
  );
};

// 处理点击事件
const handleClick = (booking) => {
  console.log('object :>> ', booking);
  if (booking) {
    currentBooking.value = booking;
    dialogVisible.value = true;
  }
};

// 日期格式化
const formatDate = (date) => {
  return dayjs(date).format('YYYY/MM/DD');
};
</script>

<style scoped>
.calendar-cell {
  padding: 8px;
  height: 100%;
}

.box-container {
  margin: 0 0;
  /* padding: 4px; */
  /* border-bottom: 1px solid #eee; */
}

.box-title {
  font-size: 12px;
  color: #666;
}

.time-slots {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.time-slot {
  flex: 1;
  padding: 2px;
  font-size: 12px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.noon {
  background: #e8f4ff;
  border: 1px solid #91caff;
}

.night {
  background: #fff7e6;
  border: 1px solid #ffd591;
}

.booked {
  background: #f0f0f0;
  color: #999;
  border-color: #d9d9d9;
}

/* 调整日历单元格高度 */
:deep(.el-calendar-table td) {
  height: 120px;
  vertical-align: top;
}

:deep(.el-calendar-table .el-calendar-day) {
  height: 100% !important;
}
</style>